<!DOCTYPE html>
<html>
<head>
    <title>Hello world</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=DDd05fcba9fea5b83bf648515e04fc4c" type="text/javascript"></script>
</head>
<body>
<div align="center">
    <!--<h3>以天安门为中心显示</h3>-->
    <div id="tamMap" style="width:99%;height: 750px;"></div><!--onmousewheel="mScroll()"-->
    <button onclick="zoomOut()">放大</button>
    <button onclick="zoomIn()">缩小</button>
</div>
<script type="text/javascript">
    var currentSize = 15;
    var maxSize = 30;
    var minSize = 0;
    var step = 1;
    var tamMap = new BMap.Map("tamMap");    //创建地图实例
    var point = new BMap.Point(116.404,39.915); //创建坐标点
    //往地图中添加控件
    tamMap.addControl(new BMap.NavigationControl());    //地图平移缩放控件PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
    tamMap.addControl(new BMap.OverviewMapControl());   //添加缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
    tamMap.addControl(new BMap.ScaleControl());     //比例尺控件，默认位于地图左下方，显示地图的比例关系。
    tamMap.addControl(new BMap.MapTypeControl());   //地图类型控件，默认位于地图右上方。
    tamMap.addControl(new BMap.GeolocationControl());   //定位控件，针对移动端开发，默认位于地图左下方。
    tamMap.addControl(new BMap.CopyrightControl());     //版权控件，默认位于地图左下方。


    tamMap.centerAndZoom(point,currentSize);    //第二个参数越小表示缩小，越大则表示地图放大显示
    //地图放大
    function zoomOut()
    {
        currentSize = currentSize+step > maxSize? currentSize:currentSize+step;
        tamMap.centerAndZoom(point,currentSize);
        // alert(currentSize);
    }
    //地图缩小
    function zoomIn()
    {
        currentSize = currentSize-step < minSize? currentSize:currentSize-step;
        tamMap.centerAndZoom(point,currentSize);
        // alert(currentSize);
    }
    //设置鼠标滑轮滚动事件
    function mScroll()
    {
        if(event.wheelDelta == 120)
        {
            currentSize = currentSize+step > maxSize? currentSize:currentSize+step;
            tamMap.centerAndZoom(point,currentSize);
        }
        else if(event.wheelDelta == -120)
        {
            currentSize = currentSize-step < minSize? currentSize:currentSize-step;
            tamMap.centerAndZoom(point,currentSize);
        }
        // document.getElementById("wheelData").innerHTML = event.wheelDelta;
        // alert("鼠标滑轮滚动.."+event.wheelDelta);
    }
</script>
<span id="wheelData"></span>
</body>
</html>